<template>
  <div class="container_wrap flex_column_between_center">
    <!-- 上部分 -->
    <div class="top_login_wrap flex_row_between_center">
      <div class="pbx_logo">
        <img src="../../assets/images/user/logo.png" alt="pbx-logo" />
      </div>
      <SelectLanguage class="select_language" :multiLanguages="multiLanguages" isLoignColor />
    </div>
    <!-- 中间部分 -->
    <div class="middle_login_wrap flex_column_between">
      <div class="mian_wrap">
        <div class="login_text">{{ multiLanguages("sign_in") }}</div>
        <div class="login_tip_text">{{ multiLanguages("sign_your_account") }}</div>
        <el-form
          ref="ruleFormRef"
          :model="loginForm"
          :rules="checkRules(multiLanguages)"
          :validate-on-rule-change="isFastValidate"
          status-icon
        >
          <el-form-item prop="username">
            <el-input :placeholder="multiLanguages('username')" size="large" v-model.trim="loginForm.username" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              :placeholder="multiLanguages('password')"
              size="large"
              v-model.trim="loginForm.password"
              show-password
            />
          </el-form-item>
          <el-form-item prop="domain">
            <el-input :placeholder="multiLanguages('domain')" size="large" v-model.trim="loginForm.domain" />
          </el-form-item>
        </el-form>
        <div class="remember_ms_wrap flex_row_between_center">
          <el-checkbox v-model="isRemember" :label="multiLanguages('remember_me')" size="large" />
          <img :src="microsoftLogin" alt="microsoft login image" />
        </div>
        <el-button type="primary" size="large" :loading="isLoading" @click="clickLogin">
          {{ multiLanguages("sign_in") }}
        </el-button>
      </div>
      <div class="footer_text_wrap">{{ multiLanguages("signin_description") }}</div>
    </div>
    <!-- 下部分 -->
    <div class="bottom_login_wrap flex_center">12</div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { initLoginFrom, checkRules } from "./form";
import microsoftLogin from "@/assets/images/login/microsoft-login.png";
import type { FormInstance } from "element-plus";
import SelectLanguage from "../common/Language.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps<{
  multiLanguages: any;
}>();
const loginForm = reactive(initLoginFrom);
const isRemember = ref(false);
const isLoading = ref(false);
/**表单对象 */
const ruleFormRef = ref<FormInstance>();
/**是否在 rules 属性改变后立即触发一次验证 */
const isFastValidate = ref(false);
/**登录点击事件 */
const clickLogin = async () => {
  isLoading.value = true;
  await ruleFormRef.value!.validate(valid => {
    if (valid) {
      router.push("/mian");
    } else {
      isFastValidate.value = true;
    }
  });
  isLoading.value = false;
};
</script>
<style lang="less" scoped>
:deep(.el-button) {
  width: 100%;
}
.container_wrap {
  width: 100%;
  height: 100%;
  background-color: #f0efed;
  .top_login_wrap {
    width: 100%;
    height: 60px;
    background-color: #232f3e;
    .pbx_logo {
      height: 100%;
      margin-left: 20%;
      display: flex;
      align-items: center;
      img {
        height: 92%;
      }
    }
    .select_language {
      margin-right: 20px;
      font-size: 12px;
      color: #ffffff;
    }
  }
  .middle_login_wrap {
    width: 420px;
    height: 520px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background-color: #ffffff;
    .mian_wrap {
      width: 100%;
      .login_text {
        margin-top: 20px;
        font-size: 28px;
        color: #333333;
        font-weight: bold;
      }
      .login_tip_text {
        margin: 15px 0px 20px;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
      }
      .remember_ms_wrap {
        width: 100%;
        margin-bottom: 15px;
        img {
          cursor: pointer;
        }
      }
    }
    .footer_text_wrap {
      color: #827b76;
      font-weight: 300;
      font-size: 12px;
    }
  }
  .bottom_login_wrap {
    width: 100%;
    height: 80px;
    background-color: #232f3e;
  }
}
</style>
